<!doctype html>
<style>
body { margin-left: 200px; }
h1 { white-space: pre-line; } /* I have no idea why this is relevant, but if you remove it the bug does not reproduce*/
div {
	clear: both;
	float: left;
	margin-left: -150px;
	width: 100px;
	height: 100px;
	background: rgba(127, 127, 127, 0.5);
}
</style>
<body>
	<h1>Title</h1>
	<div></div>
	<p>The two gray floated boxes should not overlap, but they do.</p>
	<div></div>
</body>
